<template>
  <div class="author m_pr" ref="author" v-if="author.username">
    <div :style="opacity10" ref="bg">
      <!-- 返回 -->
      <van-icon name="arrow-left" class="back m_pa m_z1" color="#fff" @click="$router.back()"/>
      <!-- 背景图 -->
      <div class="m_pr bg">
        <van-image v-if="author.backgroundUrl" class="m_w" :src="ip+author.backgroundUrl" fit="cover"></van-image>
        <van-image v-else class="m_w" :src="require('../assets/images/bg.jpeg')" fit="cover"></van-image>
      </div>
      <!--  -->
      <div class="userinfo m_flex">
        <div class="avatar_box">
          <van-image v-if="author.avatarUrl" class="avatar m_w" :src="ip+author.avatarUrl"
            fit="cover" round/>
          <div v-else class="m_br50p m_tac m_fs30 m_fw avatar avatar2">{{author.username.slice(4,5)}}</div>
        </div>
        <div class="">
          <div class="m_fs22 m_fw nickname">{{author.nickname?author.nickname:author.username}}</div>
          <div class="m_fs16 intro">{{author.signature?author.signature:'这个人很懒，还没有个性签名哦'}}</div>
        </div>
      </div>
    </div>

    <!-- 用户名：滚动显示 -->
    <van-nav-bar fixed v-show="true" :style="opacity01">
      <template #left>
        <van-icon name="arrow-left" class="" color="#000" @click="$router.back()"/>
      </template>
      <template #title>
        {{author.nickname?author.nickname:author.username}}
      </template>
    </van-nav-bar>

    <!-- 视频标签页 -->
    <van-tabs v-model="active" animated swipeable
    color="#008080" title-inactive-color="#999" title-active-color="#1f1d1e">
      <!-- 发布 -->
      <van-tab :title="`个人作品 `+works.length">
        <div class="tab_content">
          <div class="m_flex m_fwr">
            <post-item v-for="item,index in works" :key="item.id" :item="item"
              @click="toPlayList(works,index)"></post-item>
          </div>
          <div class="tip">{{works.length>0?'到底啦':'还没有哦'}}</div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
  <van-loading v-else size="24" />
</template>

<script>
import {mapState, mapMutations} from 'vuex'
import PostItem from '@/components/PostItem.vue'
export default {
  name: 'Author',
  components: {
    PostItem
  },
  props: ['id'],
  data(){
    return {
      author: {},
      works: [],
      active: 0,
      isloading: false,
      showName: false,
      opacity10: {opacity:1},
      opacity01: {opacity:0},
    }
  },
  computed: {
    ...mapState(['ip'])
  },
  methods: {
    // 辅助
    ...mapMutations('m_video',['setVideoList']),
    // 获取作家数据
    getAuthorData(id){
      this.axios.get(`api/author/${id}`).then(res=>{
        if(res.code==0){
          this.author = res.dt.author
          this.works = res.dt.works
        }else{
          this.$toast('获取作家数据失败')
        }
      })
    },
    // 去播放列表页
    toPlayList(list,initIndex){
      this.setVideoList(list)
      this.$router.push({path:'/play',query:{initIndex}})
    },
    // 滚动隐藏
    onScroll(){
      const y1 = this.$refs.author.scrollTop
      const y2 = this.$refs.bg.clientHeight - 80
      if(y1>y2){
        this.showName = true
        let opacity = y1 / 300
        opacity = opacity>=1? 1: opacity
        this.opacity10 = {opacity: 1 - opacity}
        this.opacity01 = {opacity: opacity}
      }else{
        this.showName = false
        this.opacity10 = {opacity:1}
        this.opacity01 = {opacity:0}
      }
    },
  },
  // 创建完成，获取页面数据
  created(){
    this.getAuthorData(this.id)
  },
}
</script>

<style lang="scss" scoped>
.author{
  height: calc(100vh - 50px);
  padding-bottom: 50px;
  overflow: scroll;
  &::-webkit-scrollbar{ display: none;}
  .back{
    left: 15px;
    top: 15px;
    background: rgba(0,0,0,.3);
    padding: 7px;
    border-radius: 50%;
  }
  .bg{
    .van-image{height: 120px;}
  }
  .userinfo{
    padding: 0 15px;
    gap: 15px;
    .avatar_box{
      gap: 20px;
    }
    .avatar{
      transform: translateY(-20px);
      width: 100px;
      height: 100px;
      border-radius: 50%;
      line-height: 90px;
      color: #fff;
      &.avatar2{ background: #008080;}
    }
    .intro{
      padding: 8px 0;
      line-height: 24px;
      color: #555;
    }
  }
  .van-tabs{
    .tab_content{
      border-top: 1px solid #ebebeb;
      max-height: calc(100vh - 150px);
      overflow: scroll;
    }
    .tip{
      text-align: center;
      font-size: 14px;
      color: #999;
      line-height: 50px;
    }
  }
}
</style>